<template>
    <div class="banner" @touchstart="touchIn" @touchend="touchUp" @touchmove="touchOn">
        <div class="banner-img" ref="companyStyle">
            <ul class="banner-ul" :style="{'width':needWidth*btnArr.length+'px','transform'  : `translateX(-${moveSum}px)`,'transition': transition}" @transitionend="transitionEnd">
                <li class="banner-li" v-for="item in btnArr" :key="item.id" :style="{'width':needWidth+'px'}">
                    <img :src="item.pic" alt="">
                </li>
            </ul>
        </div>

        <div class="banner-button">
            <ul class="button-ul">
                <li class="button-li" v-for="(item,index) in arr" :key="item.id" :class="{active : btnNum === index}" @touchstart.self="clickChange(index)">
                    
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            arr : [],
            btnArr : [],
            width : "",
            btnNum : 0,
            barNum : 1,
            transition : "transform 0.35s",
            time : null,
            touchMove : 0,
            touchFirst : 0,
            touchTime : 0
        }
    },
    created(){
            axios.defaults.withCredentials = true;
            axios.get(`/api/${this.bannerName}?type=2`).then(response => {
            response.data.banners.forEach(item => {
                let obj = {};
                obj.pic = item.pic;
                obj.id = Symbol();
                this.btnArr.push(obj);
                this.arr.push(obj);

            });
            let objUnshift = {};
            objUnshift.pic = response.data.banners[response.data.banners.length-1].pic;
            objUnshift.id = Symbol();
            this.btnArr.unshift(objUnshift);
            let objPush = {};
            objPush.pic = response.data.banners[0].pic;
            objPush.id = Symbol();
            this.btnArr.push(objPush);

            this.autoPlay();
        })
    },
    mounted(){
        this.$nextTick(()=>{
                this.width = this.$refs.companyStyle.offsetWidth
        })
    },
    computed:{
            needWidth(){
            let needWidth = this.width;
            return needWidth;
        },
            moveSum(){
                let num = this.barNum*this.needWidth+this.touchMove;
                return num
            }
    },
    methods :{
        bannerLeft(){
            this.barNum++;
            this.btnNum++;
            if(this.barNum<this.btnArr.length-1){
                this.transition = "transform 0.35s"
            }
            this.barNum = this.barNum<this.btnArr.length ? this.barNum : 2;
            this.btnNum = this.btnNum<this.arr.length ? this.btnNum : 0;
        },
        bannerRight(){
            this.barNum--;
            this.btnNum--;
            if(this.barNum>-1){
                this.transition = "transform 0.35s"
            }
            this.barNum = this.barNum>-1 ? this.barNum : this.btnArr.length-2;
            this.btnNum = this.btnNum>-1 ? this.btnNum : this.arr.length-1;
        },
        autoPlay(){
            clearInterval(this.time);
            this.time = setInterval(this.bannerLeft.bind(this),4000);
        },
        transitionEnd(){
            if(this.barNum>=(this.btnArr.length-1)){
                        this.transition = 'none';
                        this.barNum = 1;
            }

            if(this.barNum<1){
                this.transition = 'none';
                this.barNum = this.btnArr.length-2;
            }
        },
        clickChange(num) {
            this.transition = "transform 0.35s",
            this.barNum = num+1;
            this.btnNum = num
        },
        touchIn(e){
            this.touchFirst = e.changedTouches[0].pageX;
            this.touchTime = new Date();
            clearInterval(this.time);
        },
        touchUp(){
            let isChange = Math.abs(this.touchMove);
            if(isChange-this.needWidth/2 >0) {
                if(this.touchMove>0){
                this.bannerLeft();
                this.transition = "transform 0.35s";
                }else if(this.touchMove<0){
                this.bannerRight()
                this.transition = "transform 0.35s";
                }
            }
            this.transition = "transform 0.35s";
            this.touchMove = 0;
            this.time = setInterval(this.bannerLeft.bind(this),4000);
        },
        touchOn(e){
            this.transition = "none";
            this.touchMove = this.touchFirst-e.changedTouches[0].pageX
        },
    },
    props:{
        bannerName : {
            type : String
        }
    }
}
</script>

<style lang="scss" scoped>
    .banner {
        width: 90%;
        min-width: 275px;
        max-width: 1366px;
        border-radius: 0.5rem;
        margin: auto;
        overflow: hidden;
        position: relative;

        .banner-ul {
            display: flex;
        }

        .banner-li {
            max-width: 1366px;
            >img {
                width: 100%;
                height: auto;
            }
        }

        .button-ul {
            position:absolute;
            bottom: 0.5rem;
            left: 50%;
            transform: translateX(-50%);
            width: 75%;
            display: flex;
            justify-content: space-evenly;
        }

        .button-li {
            width: 0.4rem;
            height: 0.4rem;
            border:1px solid #ccc;
            background: transparent;
            border-radius: 50%;
            transition: all 0.2s;
        }

        .active {
            border:1px solid #ccc;
            background: red;
        }

    }
</style>